<template>
    <div>
        <!-- 查询部分 -->
        <el-row style="margin-top:5px">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <div class="exam-status">
                        <span style="margin-left: 30px;font-size: 13px; font-family:'宋体'; font-weight: bold;">考试状态：</span>
                        <el-radio-group v-model="queryForm.isfinished" size="small" @change="changeStatus">
                            <el-radio-button label="-1" class="btn">全部</el-radio-button>
                            <el-radio-button label="0"  class="btn">未开始</el-radio-button>
                            <el-radio-button label="1" class="btn">进行中</el-radio-button>
                            <el-radio-button label="2" class="btn">已结束</el-radio-button>
                        </el-radio-group>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row >
            <el-col :span="24">
                <div class="grid-content bg-purple-dark subject">
                    <div class="exam-status">
                        <span style="margin-left: 30px;font-size: 13px; font-family:'宋体'; font-weight: bold;">考试学科：</span>
                        <el-select v-model="queryForm.subjectId" filterable remote reserve-keyword clearable placeholder="请选择科目">
                            <el-option style="text-align: center;" v-for="item in subjects" :key="item.value" :label="item.name" :value="item.value"></el-option>
                        </el-select>  
                        <el-button type="primary" class="el-btn" icon="el-icon-search" @click="search"></el-button>
                    </div>
                </div>
            </el-col>
        </el-row>

        <!-- 数据展示部分 -->
        <div>
            <el-card class="box-card" shadow="never" v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)">
                <el-card class="card-option" shadow="hover" v-for="item in examData" :key="item.id">
                    <h4>{{ item.examName}}</h4>
                    <p class="exam-option">学科：{{ item.subjectName}}</p>
                    <p class="exam-option">开考时间：{{ item.beginTime}}</p>
                    <p class="exam-option">结束时间：{{ item.endTime}}</p>
                    <p class="exam-option">题目量：{{ item.questionSum}}</p>
                    <p class="exam-option">总分：{{ item.examTotal}}</p>
                    <p class="exam-option">考试时长：{{ item.examTime}}</p>
                    <p style="padding-top: 30px; margin-left: 150px;">
                        <router-link :to="{name: 'ExamPaper' ,
                            params:{id: item.id,subjectName:item.subjectName,examTotal:item.examTotal,endTime:item.endTime,examTime:item.examTime}}" 
                            v-if="item.isfinished == 1 && item.completed == false">前往考试
                        </router-link>
                        <span v-if="item.isfinished == 1 && item.completed == true" style="font-size: 14px;color: rgb(76, 242, 76);">已完成</span>
                        <span v-if="item.isfinished == 2 && item.completed == true" style="font-size: 14px;color: rgb(76, 242, 76);">已完成</span>
                        <span v-if="item.isfinished == 2 && item.completed == false" style="font-size: 14px;color: gray;">已结束</span>
                        <span v-if="item.isfinished == 0" style="font-size: 14px;color: gray;">未开始</span>
                    </p>
                </el-card>
                <el-card class="box-card" shadow="never" v-if="examData.length <= 0" v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.2)">
                    <p class="exam-option no-option">{{ message}} </p>
                </el-card>
            </el-card>
            <el-card class="page-card"  shadow="never" style="margin-top: -3px; border: none;" >
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="queryForm.pageIndex"
                    layout="prev, pager,next, total"
                    :total="total">
                </el-pagination>
            </el-card>
        </div>
    </div>
</template>

<script>
import { getSubjects } from '@/api/subject/subject';
import {getStuExamList} from '@/api/exam/exam'
export default {
    name:'Exam',
    data(){
        return{
            queryForm:{
                isfinished:-1,
                subjectId:null,
                pageIndex:1,
                pageSize:8
            },
            subjects:[],
            examData:[],
            total:0,
            loading:false,
            message:''
        }
    },
    methods:{
        changeStatus(){
            this.search();
        },
        async search(){
            this.loading = true;
            let res = await getStuExamList(this.queryForm);
            this.examData = res.data.records;
            this.total = res.data.total;
            if(this.total == 0){
                this.message = '暂时没有满足条件的数据';
            }
            this.loading = false;
        },
        handleCurrentChange(val){
            this.queryForm.pageIndex = val;
            this.search();
        },
        async getSubjectList(){
            let res = await getSubjects();
            this.subjects = res.data;
        },
    },
    mounted(){
        // 初始化查询条件
        this.getSubjectList();
        // 初始化查询的试卷
        this.search();
    }
}
</script>

<style scoped>
    *{
        margin: 0px;
        padding: 0px;
    }
    a{
        text-decoration: none;
        font-size: 14px;
        color: #409Eff;
    }
    .bg-purple-dark {
        background: white;
    }
    .el-col {
    border-radius: 4px;
    }
    .grid-content {
        padding-top: 30px;
        min-height: 36px;
    }
    .subject{
        padding-top: 5px;
        padding-bottom: 15px;
    }
    .exam-status{
        float: left;
    }
    .card-option{
        height: 330px; 
        width: 310px; 
        float: left;
        margin: 10px 10px 5px 38px;
    }
    
    .exam-option{
        text-align: left;
        padding: 10px 0px 5px 10px;
        font-family: '宋体';
    }
    .card-option:hover{
        background: rgb(232, 237, 239);
        transition: 3s;
    }
    .box-card{
        min-height: 300px;
    }
    .no-option{
        text-align: center; 
        line-height: 300px;
        border: none;
    }
    .el-btn{
        width: 80px;
        height: 38px;
        border: none;
        margin-left: 15px;
    }
</style>